<template>
	<view>
		<view class="login-tel">
			<view class="tel-main">
				<view class="logo">
					<image src="../../static/bjlogo.jpg" alt="">
				</view>
				<view class="login-form">
					<view class="login-user">
					<text class="user-text">验证码:</text>
					<input type="text" placeholder="请输入验证码" v-model="userCode">
					
						
					
					<button class="btn" plain="true" size="mini" disabled="disabled" @tap="sendcode">{{codemsg}}</button>
			
				</view>
				</view>
		    </view>
		    <view class="tel" @tap="gonextIndex">下一步</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'//把login方法拿过来
	import $http from '@/common/api/request.js'//引入request组件
	export default {
		data() {
			return {
				// 显示的倒计时时间
				codenum: 60,
				// 显示的文本
				codemsg: "",
				// 按钮是否禁用
				disable: false,
				//用户输入的内容
				userCode: "" ,// 添加usercode属性并初始化为空字符串
				phone:"",//上个页面传过来的phone
				getCode:"",
				
				rules: {
					
					  userCode: {
					    rule: /^\d{4}$/,
					    msg: "请输入四位数验证码"
					  },
					  				
					
				},
			}
		},
		mounted() {
			this.codemsg = '重新发送(' + this.codenum + ')';
			this.sendcode();
		},
		onLoad(e){
			this.phone=e.phone;
			console.log('phone:'+this.phone)
		},
		methods: {
			...mapMutations(['login']),
			// 发送验证码
			sendcode() {
				//请求接口返回验证码
				$http.request({
					url:"/auth/register",//验证码的接口地址，他还没给我
					method:"GET",
					data:{
						phone:this.userName//给后端给的phone
					
					}
				}).then((res)=>{
					//this.getCode=res.code;//res.code就是拿到的验证码,需要拿拿到的this.getCode与用户输入的userCode对比	
					console.log(res.code);//打印一下从后端拿到的code值
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
				
				this.disable = true;
				let timer = setInterval(() => {
					--this.codenum;
					this.codemsg = '重新发送('+this.codenum+')';
				}, 1000);//一秒减一次
				setTimeout(() => {
					clearInterval(timer);
					this.codenum = 60;
					this.disable = false;
					this.codemsg = '重新发送';
				}, 60000);//60秒后重发
			},
			validate(key){
				let bool=true;
				if(  !this.rules[key].rule.test(this[key])){
					uni.showToast({
						title:this.rules[key].msg,
						icon:"none"
					})
					bool=false;
					return false;
				}
				return bool;
			},
			gonextIndex() {
				
					if( !this.validate('userCode')) return;
				if(this.getCode==this.userCode){
					//请求接口向后端数据库增加一条数据
					$http.request({
						url:"/auth/register",//验证码的接口地址
						method:"POST",
						data:{
							phone:this.userName,//给后端的东西，冒号前面要和后端的保持一致
							code:this.userCode//把用户输入的userCode传给后端
						}
					}).then((res)=>{
						if(res.success){//success是true,false值，如果值为true代表注册成功，存在，则跳下一步
							uni.showToast({
								title:res.msg,//如果成功，就把调用后端的msg：success
								icon:"none"
							})
							
							this.login(res.data)//把login方法拿过来
							
							uni.redirectTo({
								url:"../index/index"
							})
						}					//比如this.getCode=res.code;//res.code就是拿到的验证码,需要拿拿到的this.getCode与用户输入的userCode对比				
					}).catch(()=>{
						uni.showToast({
							title:'请求失败',
							icon:'none'
						})
					})
				}else{
					uni.showToast({
						title:"验证码错误",
						icon:"none"
					})
				}
				/*uni.switchTab({
					url:"../index/index"
				})*/
			}
		}
	}
</script>

<style scoped>
	.login-tel {
		padding: 30rpx;
		width: 100vw;
		height: 100vh;
	}
	.tel-main {
		padding: 0 20rpx;
		padding-top: 0rpx;
	}
	.logo{
		padding-top: 70rpx;
		padding-bottom: 80rpx;
		display: flex;
		justify-content: center;
		
	}
	.tel {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #FFFF;
		background-color: #49BDFB;
		border-radius: 40rpx;
	}
	.login-form {
	position: relative;
		display: flex;
		flex-direction: row;
		padding-bottom: 20rpx;
		white-space: nowrap;
		width: 100%; /* 或根据需求设置合适的宽度 */
	
	}
	.login-user {
	position: relative;
	display: flex;
	align-items: center;
	height: 100rpx;
	line-height: 100rpx;
	text-align: left;
	color:black;
	background-color: #f7f7f7;
	border-radius: 40rpx;
	padding: 20rpx 0;
	margin: 40rpx 0rpx;
	border-bottom: 2rpx solid #f7f7f7;
		
	}
	.user-text {
		margin-left: 20rpx;
		padding-right: 10rpx;
		font-size: 32rpx;
		align-items: center;
		text-align: center;
		color: black;
		font-weight: 400;	
	}
	.btn {
	right: 10rpx;
	
	}
</style>
